import {carousel} from '@/api'
import {useCallback, useEffect, useState} from 'react'
import {HomeCarouselType} from '@/type/homeType'
import {Carousel} from 'antd'
import config from '@/static/config'
export const HomeCarousel = (props: {
	className: string
}) => {
	const [list, setList] = useState<HomeCarouselType[]>([])

	useEffect(() => {
		carousel().then(res => {
			if (res.code === 200) {
				setList(res.data.sort((a,b) => a.carousel_order - b.carousel_order))
			}
		})
	}, [])

	const onClick = useCallback((item:HomeCarouselType) => {
		window.open(item.carousel_url, '_blank')
	}, [])

	return (
		<div className={props.className}>
			<Carousel autoplay>
				{list.map(item => (
					<div key={item.carousel_img}>
						<img style={{
							cursor: "pointer"
						}} onClick={() => onClick(item)} width={'100%'} height={500} src={config.url + 'static/images/' + item.carousel_img} alt=""/>
					</div>
				))}
			</Carousel>
		</div>
	)
}
